<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<!-- user-scalable=no：禁止缩放 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>智慧后勤服务页</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.5.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
	<style type="text/css">
		@import url("css/flexbox.css");
		*{
			margin: 0px;
			padding: 0px;
			list-style-type: none;
			font-family: "microsoft yahei";
		}
		body{
			background-color: #EFEFEF;
			padding-top: 2.8125rem;
			padding-bottom: 3.4375rem;
		}
		.topic{
			height: 2.8125rem;/*45px*/
			background-color: crimson;
			color: white;
			position: fixed;
			top: 0rem;
			left: 0rem;
			width: 100%;
			z-index: 10;
			
		}
		ol, ul {
			margin-bottom: 0px!important;
		}
		 html{
			font-size: 1rem;
		}
		body{
			font-size: 1rem;
		}
		
		/* 使用定位改变图片大小：li脱流无高度 暂时无法解决 */
		/* .img-list{
			position: relative;
		}
		.img-list>li{
			position: absolute;
			top: 0rem;
			left: 0rem;
			width: 100%;
		} */
							/* 上面：li不设高度,高度由img撑开 */
							/* 下面：img中高度自动撑开*/
		/* .img-list>li>img{
			width: 100%;
			height: auto;
			display: block;
		} */
		/* 设置轮播图 */
		.slide{
			overflow: hidden;/*屏幕横向溢出隐藏*/
			position: relative;/*把小圆点定位*/
		}
		.img-list{
			width: 300%;/*整个屏幕的宽度设为三个屏幕的宽度*/
		}
		.img-list>li{
			flex: 1;/*每一个li占一个屏幕宽度*/
		}
		.img-list>li>img{
			width: 100%;
			height: auto;
			display: block;
		} 
		
		/* 设置轮播图里面的小圆点 */
		.ul-index{
			width: 100%;/*设置总宽为100%*/
			position: absolute;/*子绝父相改变小圆点的位置*/
			bottom: 0.9375rem;/*15px*/
		}
		.ul-index>li+li{
			margin-left: 0.3125rem;/*改变除第一个外其余两个球的左边缝隙宽度*/
		}
		.ul-index>li>a{
			display: block;/*a标签要先转成块级元素才能设置高宽*/
			width: 0.9375rem;/*15px*/
			height: 0.9375rem;
			border-radius: 0.46875rem;/*7.5px*/
			background-color: rgb(0,0,0);
		}
		/*使第一个小球颜色变淡，可加可不加*/
		.ul-index>li:first-child>a{
			background-color: rgba(0,0,0,0.5);
		}
		
		/* 搜索功能 */
		.search{
			position: absolute;
			top: 0.3125rem;/*5px*/
			left: 0rem;
			width: 100%;/*定位之后重新赋宽度*/
			padding: 0rem 0.625rem;
			box-sizing: border-box;
		}
		.search>img{
			/* width: 1.25rem; *//*20px*/
		/* 	height: 1.25rem; */
		}
		.search>input{
			width: 100%;
			border-radius: 0.9375rem;/*15px*/
			border: none;/*去掉边框*/
			outline: none;/* 去掉轮廓 */
			padding: 0.3125rem 0rem 0.3125rem 1.875rem;
			background-image: url(img/icon_search.png);
			background-repeat: no-repeat;/*图片不重复*/
			background-size: 1.875rem 1.875rem;/*30px*/
			box-sizing: border-box;
		}
		/* 双排四宫格 */
		.ul-grid{
			flex-wrap: wrap;/*允许换行*/
			background-color: white;/*修改背景色为白色*/
		}
		.ul-grid>li{
			width: 25%;
			font-size: 0.75rem;/*12px*/
			box-sizing: border-box;
			padding: 0.625rem 5%;/*小窍门上下10px，左右5% 图像占比20% 向内压缩内容*/
			/*重新定义主轴*/
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.ul-grid>li>img{
			display: block;/* 解决3px问题 */
			width: 100%;
			height: auto;
		}
		/* 校园公告 */
		.notice{
			margin-top: 0.3125rem;/*上边距5px*/
			background-color: #FFFFFF;/*背景颜色白色*/
		}
		.notice>.title{
			height: 2.8125rem;
			font-weight: bold;/*标题加粗*/
		}
		.title>spen{
			margin: 0rem 0.625rem;/*10px*/
		}
		/* 内容 */
		/*总框加上上下边距与背景色*/
		.item-list{
			padding: 0px 0.9375rem;/*15px*/
			background-color: white;
		}
		/*上边线*/
		.item-list>.item+.item{
			border-top: 1px solid lightgray;
		}
		/* 规定左边的盒子 */
		.item>.left>img{
			width: 2.5rem;/*32px*/
			height: 2.5rem;/*32px*/
			display: block;
			border-radius: 1.25rem;/*16px*/
		}
		/* 规定右边的盒子 */
		.item>.right{
			height:3.125rem;/*文字内容总高度50px*/
			/* background-color:blue; */
			flex: 1;/*拉伸填满行*/
		}
		/* 规定右边盒子里面的内容 */
		.user-info{
			float: left;
			margin-left: 0.625rem;/*图与字10px边距*/
		}
		.user-info>li:first-child{
			font-weight: bold;/*第一排字体加粗*/
			/* white-space: nowrap;*/
			overflow: hidden;/*文字超出隐藏*/
			/* text-overflow: ellipsis; */
		}
		.user-info>li:last-child{
			color: #808080;/*第二排字体颜色改变*/
			font-size: 0.75rem;/*12px*/
			overflow: hidden;
		}
		.user-info>li{
			height: 1.5625rem;/*25px*/
			line-height: 1.5625rem;
		}
		.item>button{
			width: 100%;
			margin: 0.625rem;
			border-radius: 1rem;
			border: none;/*去掉边框*/
			outline: none;/* 去掉轮廓 */
			background-size: 1.875rem 1.875rem;/*30px*/
			box-sizing: border-box;
			padding: 0.3125rem;
		}
		
		/* 底部 */
		.bottom-menu{
			height: 3.4375rem;
			border-top: 1px solid lightgray;
			background-color: #FCFCFC;
			position: fixed;
			width: 100%;
			bottom: 0rem;
			left: 0rem;
		}
		.bottom-menu>li>a{
		display: flex;
		flex-direction: column;
		font-size: 0.875rem;
		align-items: center;
		text-decoration: none;
		color: black;
		}
		.bottom-menu>li>a>img{
			width: 2rem;
			height: 2rem;
			display: block;
		}
	</style>
</head>
<body>
	<!-- topic：头部标题 -->
	<div class="topic flex-row justify-content-center align-items-center">
		智慧后勤
	</div>
	<!-- 轮播图开始 -->
	<div class="slide">
		<!-- <div class="container"> -->
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
			  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>
		  
			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
			  <div class="item active">
				<img src="img/index_topcarousel_01.JPG" alt="...">
				<div class="carousel-caption">
				  
				</div>
			  </div>
			  <div class="item">
				<img src="img/index_topcarousel_02.JPG" alt="...">
				<div class="carousel-caption">
				  
				</div>
			  </div>
			  <div class="item">
				<img src="img/index_topcarousel_03.JPG" alt="...">
				<div class="carousel-caption">
				 
				</div>
			  </div>
			</div>
		  
			<!-- Controls -->
			<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			  <!-- <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> -->
			  <span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			  <!-- <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> -->
			  <span class="sr-only">Next</span>
			</a>
		  </div>
		<!-- </div> -->
	</div>



	
	<!-- 双排四宫格 -->
	<ul class="ul-grid flex-row ">
		<li>
			<img src="img/tongzhigonggao.png" alt="">
			<spen>通知公告</spen>
		</li>
		<li>
			<img src="img/weixiubaoxiu.png" alt="">
			<spen>网上报修</spen>
		</li>
		<li>
			<img src="img/zhuanzhangshoukuan.png" alt="">
			<spen>自助充值</spen>
		</li>
		<li>
			<img src="img/yongcanjiucan.png" alt="">
			<spen>今日美食</spen>
		</li>
		<li>
			<img src="img/fuwupingtai.png" alt="">
			<spen>服务平台</spen>
		</li>
		<li>
			<img src="img/shiwuzhaoling.png" alt="">
			<spen>失物招领</spen>
		</li>
		<li>
			<img src="img/xueshengqingjia.png" alt="">
			<spen>学生请假</spen>
		</li>
		<li>
			<img src="img/gengduo.png" alt="">
			<spen>更多</spen>
		</li>
	</ul>
	<!-- 校园公告 公告：notice-->
	<div class="school notice">
		<div class="title flex-row justify-content-space-around align-items-center">
			——————<spen>校园公告</spen>——————
		</div>
		<div class="notice-content">
			<ul class="item-list">
				<li class="item flex-row">
					<div class="left flex-row justify-content-center align-items-center"><img src="img/wugongyuan.jpg"/></div>
					<div class="right flex-row align-items-center">
						<ul class="user-info">
							<li>教务处字（2020）20号关于做好2020年上半年全国大学英语四、六级考试学籍信息复核工作的通知</li>
							<li>教务处 2020-06-06 12：00：00</li>
						</ul>
					</div>
				</li>
				<li class="item flex-row">
					<div class="left flex-row justify-content-center align-items-center"><img src="img/gongqingt.jpg"/></div>
					<div class="right flex-row align-items-center">
						<ul class="user-info">
							<li>关于学习“伟人讲话”的通知</li>
							<li>校团委 2020-06-05 12：00：00</li>
						</ul>
					</div>
				</li>
				<li class="item flex-row">
					<div class="left flex-row justify-content-center align-items-center"><img src="img/shetuanlian.jpg"/></div>
					<div class="right flex-row align-items-center">
						<ul class="user-info">
							<li>关于举办“第十二届社团文化月闭幕式晚会”的通知</li>
							<li>校团委学生联合会 2020-06-04 12：00：00</li>
						</ul>
					</div>
				</li>
				<li class="item item-button flex-row ">
					<button type="button">点击查看更多</button>
				</li>
			</ul>
		</div>
	</div>
	<!-- 学部公告 -->
	<div class="faculty notice">
		<div class="title flex-row justify-content-space-around align-items-center">
			——————<spen>学部公告</spen>——————
		</div>
		<div class="notice-content">
			<ul class="item-list">
				<li class="item flex-row">
					<div class="left flex-row justify-content-center align-items-center">
						<img src="img/xingongxueyuan.png"/>
					</div>
					<div class="right flex-row align-items-center">
						<ul class="user-info">
							<li>信息工程学院召开2020年春季学期开学前健康教育培训会</li>
							<li>信息工程学院 2020-06-03 12：00：00</li>
						</ul>
					</div>
				</li>
				<li class="item flex-row">
					<div class="left flex-row justify-content-center align-items-center">
						<img src="img/xingongxueyuan.png"/>
					</div>
					<div class="right flex-row align-items-center">
						<ul class="user-info">
							<li>中国地质大学就业核查告知书 </li>
							<li>人文学院 2020-07-07 12：00：00</li>
						</ul>
					</div>
				</li>
				<li class="item flex-row">
					<div class="left flex-row justify-content-center align-items-center">
						<img src="img/xingongxueyuan.png"/>
					</div>
					<div class="right flex-row align-items-center">
						<ul class="user-info">
							<li>关于取消毕业前、毕业后课程补考的通知 </li>
							<li>艺术与传媒学院 2019-10-29 12：00：00</li>
						</ul>
					</div>
				</li>
				<li class="item item-button flex-row ">
					<button type="button">点击查看更多</button>
				</li>
			</ul>
		</div>
	</div>
	<!-- 底部 菜单：menu-->
	<ul class="bottom-menu flex-row justify-content-space-around align-items-center">
		<li>
			<a href="index.html">
			<img src="img/fuwu-1.png" >
			<spen>首页</spen>
			</a>
		</li>
		<li>
			<a href="information.html">
			<img src="img/xiaoxi-0.png" >
			<spen>消息</spen>
			</a>
		</li>
		<!-- <li>
			<a href="address-book.htlm">
			<img src="img/tongxunlu-0.png" >
			<spen>通讯录</spen>
			</a>
		</li> -->
		<li>
			<a href="me.html">
			<img src="img/wode-0.png" >
			<spen>我的</spen>
			</a>
		</li>
	</ul>
</body>
</html>